|
所以我正在考虑将一些Vuetify组件 Package 到我自己的自定义组件中，这样我就可以更好地控制整个应用程序的外观。我遇到的问题是，我希望为Vuetify组件提供“默认”属性，这很好，但是当我在使用组件时添加属性时，这些“覆盖”属性没有被使用。Vue 3.2.38、Vuetify 3.1.10自定义组件：
{{ name }}
import { defineComponent } from 'vue';
import { VTextField } from 'vuetify/components/VTextField';
export default defineComponent({
name: 'EmailField',
extends: VTextField,
props: {
name: {
type: String,
default: ''
}
},
computed: {
defaultProps() {
return {
color: 'yellow',
bgColor: '#252836',
variant: 'outlined',
density: 'compact'
};
}
}
});
消耗组件：
.......other template items
import { defineComponent, defineAsyncComponent } from 'vue';
export default defineComponent({
components: {
EmailField: defineAsyncComponent(() => import('@/components/custom/email-text-field.vue'))
}
});
所以默认的 prop 我在组件中设置的（defaultProps）工作正常，并正确应用于Vuetify。当使用组件时出现问题，我传递props来覆盖默认组件props。它们始终使用默认props，而消费者端的传入props没有被使用。如果我试图覆盖我的defaultProps对象中的值，那么它就不起作用。如果我使用了一个我还没有在defaultProps中设置的prop，那么它就可以正常工作。所以我猜我需要一种方法来解析prop并确定实际应用的是哪一个？我意识到这可能是一件很坚韧做的事情，但似乎这会是一种常见的情况。
|